<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>系统日志管理</title>
    <link rel="stylesheet" href="/leek_bbs/statics/yu-ui/js_css/yu.css">
    <link rel="stylesheet" href="/leek_bbs/statics/layui/css/layui.css">
    <style>

        a { color:blue; transition:0.5s; }
        a:hover { color:red; }
        .layui-layout-admin .layui-footer{
            left: 0px;
            width: 98%;
        }
    </style>

</head>
<body style="background-color: #F2F2F2">

<div class="layui-layout layui-layout-admin" id="hmc">

    <div style="background-color: #FFFFFF">
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-brief" lay-filter="demo" lay-allowClose="true" >
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form">
                        <div class="layui-form-item marg">
                            <div class="layui-inline" style="margin-left: 12px;">
                                <div class="layui-input-inline">
                                    <input type="text" id="username" placeholder="请输入操作者用户名..." name="username" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="text" id="operation" name="operation" placeholder="请输入执行的操作..." autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline" style="width: 100px;">
                                    <input type="text" id="start_time" name="start_time" placeholder="开始时间..." autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid">-</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                    <input type="text" id="end_time" name="end_time" placeholder="结束时间..." autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <button type="button" lay-submit lay-filter="searchBtn"  class="layui-btn layui-btn-warm layui-icon layui-icon-search">查询</button>
                                    <button type="reset" class="layui-btn layui-icon layui-icon-refresh-1 layui-btn-normal">重置</button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <table class="layui-hide" id="sysLogTable" lay-filter="test"></table>

                    <!-- 自定义按钮 -->
                    <div style="display: none;" id="cellphoneToo">
                        <div class="layui-btn-group">
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete"><i class="layui-icon">&#xe640;</i>批量删除</button>
                        </div>
                    </div>

                    <!-- 自定义操作按钮 -->
                    <div id="cellphoneBar" >
                        <a style="margin-left: 2px;" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <div align="center">
            © 凛冬 - 版权所有
        </div>
    </div>
</div>
<script src="/leek_bbs/statics/component/common_import.js"></script>
<script>
    let tableLoad;

    layui.use(['table','form','element','layer','laydate','util'], function(){
        let table = layui.table;
        let element = layui.element;
        let layer = layui.layer,
            util = layui.util,
            laydate = layui.laydate,
            form = layui.form;
        //日期范围
        laydate.render({
            elem: '#start_time'
            , theme: '#393D49'
        });
        laydate.render({
            elem: '#end_time'
            , theme: '#393D49'
        });

        loadingTable("");

        function loadingTable(params){
            //表格数据渲染必须函数
            tableLoad = table.render({
                elem: '#sysLogTable'	//表格操作对象
                ,url:'/leek_bbs/stair/sysLog/listRecords'	//数据接口
                //,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,toolbar: '#cellphoneToo'	//自定义表格上面左侧按钮
                , method: 'post'
                , contentType: 'application/json'
                ,defaultToolbar: ['filter', 'exports',]
                ,height:540     //固定表格高度,当每页要显示的条数大于10条时,让它出现下拉框
                ,cellMinWidth:100	//设置列的最小默认宽度,拉伸时最小能缩小的宽度
                , request: {
                    pageName: 'currentPage' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                ,done:function(res,curr,count){
                }
                //,totalRow:true	//开启合并行,进行计算
                ,text:{
                    none:'暂无相关数据'//默认:无数据
                }
                ,where: params
                ,page: true
                //,limit:20	//设置每页显示的条数,默认显示为10条
                ,limits:[10,20,30,40]	//每页显示条数选择下拉框
                ,title: '系统操作日志数据表'	//数据导出标题
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}	//复选框,多选
                    ,{field:'id', title:'ID',fixed: 'left',width:70, unresize: true, sort: true}//sort:已请求数据排序开启
                    ,{field:'username', title:'操作者',width:110}	//edit:可编辑数据 align:center居中显示
                    ,{field:'operation', title:'执行的操作',width:170}
                    ,{field:'method',title:'请求的类以及方法',width:230}
                    ,{field:'url', title:'请求地址',width:220}
                    ,{field:'ip',title:'操作IP',width:145}
                    ,{field:'create_time',title:'操作时间',width:185,
                        templet: function (d) {
                            return util.toDateString(d.create_time, 'yyyy-MM-dd HH:mm:ss')
                        }
                    }
                    ,{fixed: 'right', title:'操作',width: 110, toolbar: '#cellphoneBar'}	//toolbar可使用默认提供按钮,也可自定义按钮
                ]]

            });
        }


        form.on('submit(searchBtn)',function (data) {
            loadingTable(data.field);
        });


        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            let checkStatus = table.checkStatus(obj.config.id);
            let data = checkStatus.data;    //表格选中的数据
            console.log(obj.config);
            switch(obj.event){
                case 'batchDelete':
                    //layer.msg('选中了：'+ data.length + ' 个');
                    if (data.length > 0){
                        let ids = new Array(data.length);
                        for (let i in data) {
                            let id = data[i].id;
                            ids[i] = id;
                        }
                        ui.confirm('确定删除吗?', function(z){
                            if (z){
                                deleteSysLog(ids);
                            }
                        });
                    } else {
                        ui.alert("请选择您要删除的数据",1500,false);
                    }

                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            let data = obj.data;
            let ids = [];
            //console.log(obj)
            if(obj.event === 'del'){
                ui.confirm('确定删除这条数据吗', function(z){
                    ids[0] = data.id;
                    if(z){
                        deleteSysLog(ids);
                    }

                });
            }
        });

        //批量删除数据或删除单行数据
        function deleteSysLog(ids) {
            axios.post('/leek_bbs/stair/sysLog/deletePostReport',ids).then((res) => {
                let data = res.data;
                if (data.code == "500020"){
                    ui.success("删除成功",1500,false);
                    tableLoad.reload();
                }else if (data.code == "500037") {
                    layer.msg(data.msg);
                }else{
                    ui.alert(data.msg,1500,false);
                }
            }).catch(function (error) {
                ui.alert("请求异常",1500,false);
                console.log(error);
            });

        }


    });




</script>

</body>
</html>